<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<script src="./babel.min.js"></script>
<script src="./prop-types.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      todos:['吃饭','睡觉','打豆豆']
    }
    this.add = this.add.bind(this)
  }
  add(newTodo){
    console.log(newTodo)
    let todos = this.state.todos;
    todos.unshift(newTodo);
    this.setState({
      todos:todos
    })
  }
  render(){
    let {todos} = this.state;
    return (
      <div>
        <h2>Simple TODO List</h2>
        <AddToDo add={this.add} len={todos.length}/>
        <TodoList todos={todos} />
      </div>
    )
  }
}
class AddToDo extends React.Component{
  constructor(props){
    super(props);
    this.addTodo = this.addTodo.bind(this)
  }
  addTodo(){
    let newTodo = this.refs.newTodo.value;
    if(newTodo.trim()){
      //console.log(newTodo)
      this.props.add(newTodo);
      this.refs.newTodo.value = '';
    }
  }
  render(){
    let {len} = this.props;
    return(
      <div>
        <input type="text" ref="newTodo"/>
        <button onClick={this.addTodo}>add #{len}</button>
      </div>
    )
  }
}
class TodoList extends React.Component{
  render(){
    let {todos} = this.props;
    return (
      <ul>
        {
          todos.map((item,index)=><li key={index}>{item}</li>)
        }
      </ul>
    )
  }
}
ReactDOM.render(<App />,document.getElementById('example'))
</script>
</body>
</html>